﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Demo</title>@*
	<link rel="stylesheet" type="text/css" href="path/to/easyui.min.css">
	<script type="text/javascript" src="path/to/easyui.min.js"></script> *@
	<!-- 假设已正确引入easyui相关的css文件，示例中暂未给出完整引入代码 -->
	<link href="//unpkg.com/layui@2.9.20/dist/css/layui.css" rel="stylesheet">
</head>
<body class="layui-padding-3">
	<div>
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<label class="layui-form-label">工艺路线编号:</label>
				<div class="layui-input-block">
					<input type="text" Id="processRouteNumber" lay-verify="required" placeholder="请输入，忽略将自动生成" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">开启审批:</label>
				<div class="layui-input-block"  >
					<input type="radio" name="sex" value="true" title="是" checked>
					<input type="radio" name="sex" value="false" title="否">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">工艺路线名称:</label>
				<div class="layui-input-block">
					<input type="text" Id="processRouteName" lay-verify="required" placeholder="工艺路线名称" autocomplete="off" class="layui-input">
				</div>
			</div>
		</form>
	</div>
	工艺路线-工序列表
	<div>
		<a onclick="addNewRow();" plain="true" iconcls="icon-add" class="easyui-linkbutton" href="#" id="add">添加一行</a>
		<a onclick="removeRow();" plain="true" iconcls="icon-remove" class="easyui-linkbutton" href="#" id="eidt">删除一行</a>
	</div>
	<div id="Addwin" class="easyui-window" title="添加工序列表" style="width: 815px; height: 200px"
		 data-options="iconCls:'icon-save',modal:true">
		<div style="padding: 15px 15px 10px 60px;">
			<form id="AddForm" method="post" style="width: 710px;height: 200px">
				<table cellpadding="3" id="myTab">
					<thead>
						<tr align="center">
							<td>类型</td>
							<td>工序</td>
							<td>工艺路线</td>
							<td>报工树配比</td>
						</tr>
					</thead>
					<tr>
						<td>
							<select style='width:100px' name="wTypeId" id="wTypeId">
								<option value="0">请选择类型</option>
							</select>
						</td>
						<td>
							<select style='width:100px' name="workingProcedureType" id="workingProcedureType">
								<option value="">请选择工序</option>

							</select>
						</td>
						<td>
							<select style='width:100px' name="processRouteIds" id="processRouteIds">
								<option value="">请选择工艺路线</option>

							</select>
						</td>
						<td>
							<input type='text' style='width:80px' name="workingNumBer" id="workingNumBer" />
						</td>

						<td style="border:0">
							<input style='width:40px; border:0' type='hidden' name="StudentArray1" id="StudentArray1" />
						</td>
					</tr>
				</table>
			</form>

		</div>
	</div>

	<button type="button" class="layui-btn" onclick="Add()">保存</button>
	<button type="reset" class="layui-btn layui-btn-primary">关闭</button>

	<!-- 假设已正确引入easyui相关的js文件，示例中暂未给出完整引入代码 -->
	<script src="//unpkg.com/layui@2.9.20/dist/layui.js"></script>
</body>
</html>
<script>
	var form = layui.form;
	var $ = layui.jquery;

	$(function () {
		selectType();
		selectWorkingProcedureType();
		selectProcessRoute()
	})


	// // //动态创建table
	// function addNewRow() {
	//     var tabObj = document.getElementById("myTab");//获取添加数据的表格
	//     var rowsNum = tabObj.rows.length;  //获取当前行数
	//     var colsNum = tabObj.rows[rowsNum - 1].cells.length;//获取行的列数
	//     var myNewRow = tabObj.insertRow(rowsNum);//插入新行

	//     if (rowsNum >= 9) {
	//         alert("警告，最多添加八行记录！");
	//     } else {
	//         var newTdObj1 = myNewRow.insertCell(0);
	//         newTdObj1.innerHTML = "<select style='width:100px' name=`wTypeId" + rowsNum + "` id=`wTypeId" + rowsNum + "`> <option value=`0`>请选择类型</option></select>";
	//         var newTdObj2 = myNewRow.insertCell(1);
	//         newTdObj2.innerHTML = "<select style='width:100px' name=`workingProcedureType" + rowsNum + "` id=`workingProcedureType" + rowsNum + "`> <option value=`0`>请选择类型</option></select>";
	//         var newTdObj3 = myNewRow.insertCell(2);
	//         newTdObj3.innerHTML = "<select style='width:100px' name=`processRouteIds" + rowsNum + "` id=`processRouteIds" + rowsNum + "`> <option value=`0`>请选择类型</option></select>";
	//         var newTdObj4 = myNewRow.insertCell(3);
	//         newTdObj4.innerHTML = "<input type='text' style='width:80px' name='workingNumBer" + rowsNum + "' id='workingNumBer" + rowsNum + "' />";
	//         form.render();
	//     }
	//     $.ajax({
	//         url: '@ViewBag.Keep' + '/api/Department/WTypeList',
	//         type: 'get',
	//         async: false,
	//         dataType: 'json',
	//         success: function (res) {
	//             console.log(res)
	//             $.each(res.data, function () {
	//                 $(`#wTypeId${rowsNum}`).append(`<option value="${this.wTypeId}">${this.wTypeName}</option>`)
	//             });
	//         }
	//     })
	//     console.log(rowsNum)
	//     form.render();
	//     //selectType();
	// }

	// 定义函数addNewRow
	function addNewRow() {
		// 获取id为'myTab'的表格元素
		var tabObj = document.getElementById("myTab");
		console.log(tabObj)
		// 获取表格当前的行数
		var rowsNum = tabObj.rows.length;

		// 如果当前行数大于等于9，则弹出警告
		if (rowsNum >= 9) {
			alert("警告，最多添加八行记录！");
			return; // 添加新行失败，直接返回
		}
		// 在表格末尾插入新行
		var myNewRow = tabObj.insertRow(rowsNum);
		// 为新行添加四个单元格
		var newTdObj1 = myNewRow.insertCell(0);
		var newTdObj2 = myNewRow.insertCell(1);
		var newTdObj3 = myNewRow.insertCell(2);
		var newTdObj4 = myNewRow.insertCell(3);

		// 设置单元格内容
		newTdObj1.innerHTML = `<select style='width:100px' name='wTypeId${rowsNum}' id='wTypeId${rowsNum}'><option value='0'>请选择类型</option></select>`;
		newTdObj2.innerHTML = `<select style='width:100px' name='workingProcedureType${rowsNum}' id='workingProcedureType${rowsNum}'><option value='0'>请选择类型</option></select>`;
		newTdObj3.innerHTML = `<select style='width:100px' name='processRouteIds${rowsNum}' id='processRouteIds${rowsNum}'><option value='0'>请选择类型</option></select>`;
		newTdObj4.innerHTML = `<input type='text' style='width:80px' name='workingNumBer${rowsNum}' id='workingNumBer${rowsNum}' />`;

		// 发送请求获取类型列表
		$.ajax({
			url: '@ViewBag.Keep' + '/api/Department/WTypeList',
			type: 'get',
			dataType: 'json',
			success: function (res) {
				// 请求成功后，将返回的数据填充到第一个下拉选择框中
				var selectElement = $(`#wTypeId${rowsNum}`);
				$.each(res.data, function () {
					selectElement.append(`<option value="${this.wTypeId}">${this.wTypeName}</option>`);
				});
				// 只在数据加载完成后渲染表单元素
				form.render();
			}
		});

		var data = {
			"processNumber": 0,
			"processName": ""
		}
		// 获取所有下拉选择框
		$.ajax({
			url: '@ViewBag.Durian' + '/api/Process/Handle1',
			data: JSON.stringify(data),
			type: 'post',
			dataType: 'json',
			contentType: 'application/json',
			success: function (res) {
				var selectElement = $(`#workingProcedureType${rowsNum}`);
				$.each(res.data, function () {
					selectElement.append(`<option value="${this.processID}">${this.processName}</option>`);
				});
			}
		})
		// 获取所有下拉选择框
		$.ajax({
			url: '@ViewBag.Keep' + '/api/Department/ProcessRouteList',
			type: 'get',
			async: false,
			dataType: 'json',
			success: function (res) {
				var selectElement = $(`#processRouteIds${rowsNum}`);
				$.each(res.data, function () {
					selectElement.append(`<option value="${this.processRouteId}">${this.processRouteName}</option>`);
				});
			}
		})

	}
	//窗口表格删除一行
	function removeRow() {
		var tab = document.getElementById('myTab');
		var i = tab.rows.length;
		if (tab.rows.length > 2) {
			tab.deleteRow(tab.rows.length - 1);
			--i;
		}
		else {
			alert("已经剩下最后一行，不能删除！");
		}
	}
	//下拉框
	//类型
	function selectType() {

		$.ajax({
			url: '@ViewBag.Keep' + '/api/Department/WTypeList',
			type: 'get',
			async: false,
			dataType: 'json',
			success: function (res) {
				console.log(res)
				$.each(res.data, function () {
					$(`[name="wTypeId"]`).append(`<option value="${this.wTypeId}">${this.wTypeName}</option>`);
				});
			}
		})
	} 
	//工序
	function selectWorkingProcedureType() {
		var data = {
			"processNumber": 0,
			"processName": ""
		}
		console.log(JSON.stringify(data))
		$.ajax({
			url: '@ViewBag.Durian' + '/api/Process/Handle1',
			data: JSON.stringify(data),
			type: 'post',
			async: false,
			dataType: 'json',
			contentType: 'application/json',
			success: function (res) {
				console.log(res)
				$.each(res.data, function () {
					$(`[name="workingProcedureType"]`).append(`<option value="${this.processID}">${this.processName}</option>`);
				});
			}
		})
	}

	//工艺路线
	function selectProcessRoute() {
		$.ajax({
			url: '@ViewBag.Keep' + '/api/Department/ProcessRouteList',
			type: 'get',
			async: false,
			dataType: 'json',
			success: function (res) {
				console.log(res)
				$.each(res.data, function () {
					$(`[name="processRouteIds"]`).append(`<option value="${this.processRouteId}">${this.processRouteName}</option>`);
				});
			}
		})
	}

	//添加
	function Add() {
		// 获取id为'myTab'的表格元素
		var tabObj = document.getElementById("myTab");
		console.log(tabObj)
		// 获取表格当前的行数
		var rowsNum = tabObj.rows.length-1;
		var createProcessRoute = {
			"processRouteNumber":$("#processRouteNumber").val(),
			"processRouteName":$("#processRouteName").val(),
			"approval": $(`[name="sex"]:checked`).val()=="true",
			"createId": 1,
			"createName": "超级管理员",
		}


		var workingProcedure = [{
			"createId": 1,
			"createName": "超级管理员",
			"createDate": "2024-12-19T02:52:11.405Z",
			"updateId": 1,
			"updateName": "超级管理员",
			"updateDate": "2024-12-19T02:52:11.405Z",
			"deleteId": 0,
			"deleteName": "",
			"deleteDate": false,
			"processRouteId": 0,
			"wTypeId": $(`#wTypeId`).val(),
			"workingProcedureType": $(`#workingProcedureType`).val(),
			"processRouteIds": $(`#processRouteIds`).val() || 0,
			"workingNumBer": $(`#workingNumBer`).val()
		}];
		for (var i = 1; i < rowsNum; i++) {

			var processRouteId = 0;
			var wTypeId = $(`#wTypeId`).val();
			var workingProcedureType = $(`#workingProcedureType`).val();
			var processRouteIds = $(`#processRouteIds`).val()||0;
			var workingNumBer = $(`#workingNumBer`).val();
			workingProcedure.push({
				"createId": 1,
				"createName": "超级管理员",
				"createDate": "2024-12-19T02:52:11.405Z",
				"updateId": 1,
				"updateName": "超级管理员",
				"updateDate": "2024-12-19T02:52:11.405Z",
				"deleteId": 0,
				"deleteName": "",
				"deleteDate": false,
				"processRouteId": processRouteId,
				"wTypeId": wTypeId,
				"workingProcedureType": workingProcedureType,
				"processRouteIds": processRouteIds,
				"workingNumBer": workingNumBer,
			});
		}
		console.log(JSON.stringify({ createProcessRoute, workingProcedure }))

		$.ajax({
			url: '@ViewBag.Keep' + '/api/Department/ProcessRouteCreate',
			data: JSON.stringify({ createProcessRoute, workingProcedure }),
			type: 'post',
			dataType: 'json',
			contentType: 'application/json',
			success: function (res) {
                console.log(res)
				if (res.code == 0) {
					// layer.msg(data);
					layer.msg("保存成功！", { icon: 6, time: 1000 });
				} else {
					layer.msg(res.msg, { icon: 5, time: 1000 });
				}
			}
		})





	}


</script>


